<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="../dist/vuescroll.js"></script>
    <link rel="stylesheet" href="../dist/vuescroll.css">

    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        #app {
            width: 100%;
            height: 90%;
            padding-bottom: 10px;
        }

        #operateArea {
            float: left;
            width: 40%;
        }

        #parent {
            float: left;
            width: 60%;
            height: 500px;
        }

        .content {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 10px;
            transition: all 2s;
            opacity: 0.8;
        }

        .__panel {
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div id="app">
        <vue-scroll :ops="{scrollPanel: {scrollingX: false}}">
            <div id="parent">
                <!-- bind your own options in data -->
                <vue-scroll :ops="ops" ref="vs" @handle-scroll="handleScroll" @refresh-activate="refreshActivate" @refresh-before-deactivate="refreshBeforeDeactivate"
                    @refresh-deactivate="refreshDeactivate" @refresh-start="refreshStart" @load-activate="loadActivate" @load-before-deactivate="loadBeforeDeactivate"
                    @load-deactivate="loadDeactivate" @load-start="loadStart" @handle-scroll-complete="handleComplete">
                    <template v-for="(item, index) in randomArray">
                        <div class="content" :key="index" :style="{backgroundColor: item}" :id="'d' + (index + 1)">
                            <span>{{index+1 + '.' + item}}</span>
                        </div>
                        <br v-if="(index+1) % 8 == 0" />
                    </template>
                </vue-scroll>
            </div>
            <div id="operateArea">
                <p align="center">
                    <a href="https://github.com/YvesCoding/vuescroll">
                        <img src="http://vuescrolljs.yvescoding.org/logo.png" width="90" height="58">
                    </a>
                </p>
                <fieldset>
                    <legend>operation panel</legend>
                    <fieldset>
                        <legend>common</legend>
                        mode:
                        <br> native:
                        <input type="radio" value="native" v-model="ops.vuescroll.mode"> slide:
                        <input type="radio" value="slide" v-model="ops.vuescroll.mode">
                        <br>bar-background:</br>

                        <br>speed:
                        <br>
                        <input type="number" v-model="ops.scrollPanel.speed" min="100" max="5000">
                        <br>scrollingX:
                        <br> true:
                        <input type="radio" :value="true" v-model="ops.scrollPanel.scrollingX"> false:
                        <input type="radio" :value="false" v-model="ops.scrollPanel.scrollingX">
                        <br>scrollingY:
                        <br> true:
                        <input type="radio" :value="true" v-model="ops.scrollPanel.scrollingY"> false:
                        <input type="radio" :value="false" v-model="ops.scrollPanel.scrollingY">
                        <br>zooming:
                        <br> true:
                        <input type="radio" :value="true" v-model="ops.vuescroll.zooming"> false:
                        <input type="radio" :value="false" v-model="ops.vuescroll.zooming">
                        <br> scrollBy:
                        <br> dx:
                        <input type="text" v-model="dx">
                        <br> dy:
                        <input type="text" v-model="dy">
                        <br />

                        <button @click="scrollBy">go</button>
                    </fieldset>
                    <fieldset>
                        <legend>slide-mode</legend>
                        refresh:
                        <br> enable:
                        <input type="radio" :value="true" v-model="ops.vuescroll.pullRefresh.enable"> disable:
                        <input type="radio" :value="false" v-model="ops.vuescroll.pullRefresh.enable">
                        <br>load:
                        <br> enable:
                        <input type="radio" :value="true" v-model="ops.vuescroll.pushLoad.enable"> disable:
                        <input type="radio" :value="false" v-model="ops.vuescroll.pushLoad.enable">
                    </fieldset>
                    <fieldset>
                        <legend>native-mode</legend>
                        animate:
                        <br>
                        <select v-model="ops.scrollPanel.easing">
                            <option v-for="easing in easings" :value="easing">
                                {{easing}}
                            </option>
                        </select>
                    </fieldset>
                </fieldset>
            </div>
        </vue-scroll>
    </div>
    <script>
        var easings = [
            'easeInQuad',
            'easeOutQuad',
            'easeInOutQuad',
            'easeInCubic',
            'easeOutCubic',
            'easeInOutCubic',
            'easeInQuart',
            'easeOutQuart',
            'easeInOutQuart',
            'easeInQuint',
            'easeOutQuint',
            'easeInOutQuint'
        ]
        var vm = new Vue({
            el: "#app",
            data: {
                ops: {
                    vuescroll: {
                        mode: "slide",
                        pullRefresh: {
                            tips: {
                                beforeDeactive: "Refresh Successfully!"
                            },
                            enable: true
                        },
                        pushLoad: {
                            tips: {
                                beforeDeactive: "Load Successfully!"
                            },
                            enable: true
                        },
                        paging: false,
                        zooming: false,
                        sizeStrategy: "number"
                    },
                    scrollPanel: {
                        easing: "easeInQuad",
                        speed: 300,
                        scrollingX: true,
                        scrollingY: true
                    },
                    bar: {
                        showDelay: 1000,

                    },
                    rail: {

                    }
                },
                dataNums: 220,
                reRender: 1,
                easings: easings,
                dx: 0,
                dy: 0
            },
            computed: {
                randomArray() {
                    function getRandom() {
                        let str = "#";
                        for (let i = 0; i < 6; i++) {
                            str += Math.floor(Math.random() * 16).toString(16);
                        }
                        return str;
                    }
                    return this.reRender && Array.apply(null, {
                        length: this.dataNums
                    }).map(item => {
                        return getRandom();
                    })
                }
            },
            methods: {
                handleScroll(v) {
                    if (v.process == 1 && !this.ops.vuescroll.pushLoad.enable) {
                        this.dataNums += 20;
                    }
                },
                getCurrentviewDom() {
                    console.log(this.$refs['vs'].getCurrentviewDom());
                },
                handleComplete(v, h) {
                    console.log(v, h);
                },
                refresh() {
                    this.reRender++;
                },
                refreshActivate(vm, refreshDom) {
                    console.log(vm, refreshDom, 'refreshActive');
                },
                refreshBeforeDeactivate(vm, refreshDom, done) {
                    console.log(vm, refreshDom, 'refreshBeforeDeactive');
                    setTimeout(() => {
                        done();
                    }, 500)
                },
                refreshDeactivate(vm, refreshDom) {
                    console.log(vm, refreshDom, 'refreshDeactive');
                },
                refreshStart(vm, dom, done) {
                    setTimeout(() => {
                        this.reRender++;
                        done();
                    }, 2000);
                },
                loadActivate(vm, loadDom) {
                    console.log(vm, loadDom, 'loadActive');
                },
                loadBeforeDeactivate(vm, loadDom, done) {
                    console.log(vm, loadDom, 'loadBeforeDeactive');
                    setTimeout(() => {
                        if (this.add) {
                            this.dataNums += 100;
                        }
                        done();
                    }, 500)
                },
                loadDeactivate(vm, loadDom) {
                    console.log(vm, loadDom, 'loadDeactive');
                },
                loadStart(vm, dom, done) {
                    setTimeout(() => {
                        done();
                        if (Math.random() < 0.5) {
                            this.add = true;
                            this.ops.vuescroll.pushLoad.tips.beforeDeactive = "load successfully!";
                        } else {
                            this.add = false;
                            this.ops.vuescroll.pushLoad.tips.beforeDeactive = "no more data!";
                        }
                    }, 2000);
                },
                scrollBy() {
                    this.$refs['vs'].scrollBy({
                        dx: this.dx,
                        dy: this.dy
                    })
                }
            }
        })
    </script>
</body>

</html>